<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
<!--            <hello-world msg="welcome to my vuejs app"></hello-world>-->
        <!--<h1>插槽demo(name)：</h1>
        <slot-demo-name>
            <template v-slot:girl>
                漂亮、美丽、逛街、购物
            </template>
            <template #boy>
                帅气、才实
            </template>
            <template>

            </template>
        </slot-demo-name>
        <h1>插槽demo(prop)1：</h1>
        &lt;!&ndash;    <slot-demo-prop1>&ndash;&gt;
        &lt;!&ndash;      <template slot-scope="props"><span>Hello from parent</span><br/><span>{{ props.Myprop }}</span></template>&ndash;&gt;
        &lt;!&ndash;    </slot-demo-prop1>&ndash;&gt;
        <slot-demo-prop1 v-slot   1:default="props">
            <span>Hello from parent</span><br/><span>{{ props.Myprop }}</span>
        </slot-demo-prop1>
        <h1>插槽demo(prop)2：</h1>
        <slot-demo-prop2 title="Shapes" :items="shapes">
            <template slot-scope="shape">
                <div>{{ shape.name }}
                    <small>({{ shape.sides }} sides)</small>
                </div>
            </template>
        </slot-demo-prop2>
        <slot-demo-prop2 title="Colors" :items="colors">
            <template slot-scope="color">
                <div>
                    <div class="swatch" :style="{ background: color.hex }"></div>
                    {{ color.name }}
                </div>
            </template>
        </slot-demo-prop2>
        <h1>jasdjfalskf</h1>
        <prop-event-demo></prop-event-demo>-->
        <dynamic-component-demo></dynamic-component-demo>

    </div>
</template>

<script>
    // import HelloWorld from './components/HelloWorld.vue'
    // import SlotDemoName from './components/slot-demo-name'
    // import SlotDemoProp1 from './components/slot-demo-prop1'
    // import SlotDemoProp2 from './components/slot-demo-prop2'
    // import PropEventDemo from './components/prop-event-parent-demo'
    import DynamicComponentDemo from './components/dynamic-component-demo'

    export default {
        name: 'app',
        /*SlotDemoName,
            SlotDemoProp1,
            SlotDemoProp2,
            PropEventDemo*/
        components: {
            DynamicComponentDemo,

        },
        data() {
            return {
                shapes: [{name: 'Square', sides: 4}, {name: 'Hexagon', sides: 6}, {name: 'Triangle', sides: 3}],
                colors: [{
                    name: 'Yellow',
                    hex: '#f4d03f'
                }, {
                    name: 'Green',
                    hex: '#229954'
                }, {
                    name: 'Purple',
                    hex: '#9b59b6'
                }]
            }
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>
